<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>租约列表</title>
		<!-- 引入 WeUI -->
		<link rel="stylesheet" href="css/weui.css" />
		<link rel="stylesheet" href="css/example.css" />
		<!--<link rel="stylesheet" href="css/roomsbinding.css" />-->
		<link rel="stylesheet" href="css/rentrecord.css" />
		<link rel="stylesheet" href="css/bill-details.css" />
	</head>

	<body ontouchstart>
		<div class="container" id="container"></div>
		<script type="text/html" id="tpl_home">
			<div class="page page-home">
				<div class="list-div" id="list-v">
					<div class="item-div" v-for="item in listData" @click="itemClick">
						<div class="div1 border-b">
							青年公寓 A101
						</div>
						<div class="div2">
							<div class="div2-item">
								<span>
									租客姓名
								</span>
								<span class="color-g">
									梁福顺
								</span>
							</div>
							<div class="div2-item">
								<span>
									租客电话
								</span>
								<span class="color-g">
									18049940871
								</span>
							</div>
							<div class="div2-item">
								<span>
									租期
								</span>
								<span class="color-g">
									2018-1-4~2018-12-1
								</span>
							</div>
							<div class="div2-item">
								<span>
									租金
								</span>
								<span class="color-g">
									600
								</span>
							</div>
							<div class="div2-item">
								<span>
									押金
								</span>
								<span class="color-g">
									500
								</span>
							</div>

						</div>

					</div>
				</div>
			</div>
			<script type="text/javascript">
				var vm = new Vue({
					el: '#list-v',
					data: {
						listData: [{}, {}]
					},
					methods: {
						itemClick: function() {
							window.pageManager.go('details');
						}
					},
				})
			</script>
		</script>
		<script type="text/html" id="tpl_details">
			<div class="page">
				<div class="page__bd">
					<div class="details-title">
						<div class="">
							青年公寓 A101
						</div>
						<div class="size8">
							房东电话
						</div>
					</div>

					<div class="detail-small-item border-b">
						<span>
							 租客姓名
						</span>
						<span>
							 梁福顺
						</span>
					</div>
					<div class="detail-small-item border-b">
						<span>
							  租客电话
						</span>
						<span>
							 18249940871
						</span>
					</div>
					<div class="detail-small-item border-b">
						<span>
							  租约周期
						</span>
						<span>
							 2018-1-1~2018-12-1
						</span>
					</div>
					<div class="detail-small-item border-b">
						<span>
							  收租方式
						</span>
						<span>
							 押一付一
						</span>
					</div>
					<div class="line-view">
					</div>
					<div class="bg-w">
						<div class="fee-view-title border-b">
							费用明细
						</div>
						<div class="fee-view-item border-b">
							<span>
							 租金
						</span>
							<span>
							 ￥600
						</span>
						</div>
						<div class="fee-view-item border-b">
							<div class="fee-view-item-c">
								<div>
									<span>
							 水费
						</span>
									<span class="size8 color-g">
							 (5元/吨)
						</span>
								</div>
								<span class="size8 color-g">
								0~0 实际用量 0
							</span>
							</div>

						</div>
					</div>

					<div class="line-view"></div>
					<div class="fee-view-title border-b">
						押金明细
					</div>
					<div class="fee-view-item border-b">
						<span>
							 房租押金
						</span>
						<span>
							 ￥600
						</span>
					</div>
					<div class="fee-view-item border-b">
						<span>
							钥匙押金
						</span>
						<span>
							 ￥20
						</span>
					</div>

				</div>

			</div>
		</script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script src="js/zepto.min.js"></script>
		<script src="js/example.js"></script>
	</body>

</html>